<template>
    <div class="com-editor">
        <ckeditor :editor="editor"
                  :value="value"
                  :disabled="disabled"
                  :config="editorConfig"
                  @ready="fEditorEvent('ready')"
                  @focus="fEditorEvent('focus')"
                  @blur="fEditorEvent('blur')"
                  @input="fEditorInput"
                  @destroy="fEditorEvent('destroy')"></ckeditor>
    </div>
</template>

<script>
    //@ckeditor/ckeditor5-vue2 文档：
    //https://www.npmjs.com/package/@ckeditor/ckeditor5-vue2
    //import Editor from '@/dependencies/ckeditor5/build/ckeditor';
    import Editor from 'ckeditor5-custom-build/build/ckeditor';
    import { URLS_COM } from '@/urls.js'
    export default {
        //**** el, name
        //**** components, directives
        //**** extends, mixins, provide/inject
        //**** props, data, computed
        props: {
            value: {
                type: String,
                default: ''
            },
            config: {
                type: Object,
                default: () => { }
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                editor: Editor,
                editorConfig: {
                    // The configuration of the editor.
                    language: 'zh-cn',
                    toolbar: {
                        shouldNotGroupWhenFull: true,

                        items: [
                            'undo', 'redo',
                            '|',
                            'heading',
                            '|',
                            'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor',
                            '|',
                            'removeFormat', 'bold', 'italic', 'subscript', 'superscript', 'strikethrough', 'underline',
                            '|',
                            'link', 'horizontalLine', 'blockQuote',
                            '|',
                            'bulletedList', 'numberedList', 'todoList',
                            '|',
                            'alignment', 'outdent', 'indent',
                            '|',
                            'insertTable', 'imageInsert',
                            '|',
                            'sourceEditing'
                        ]
                    },
                    fontFamily: {
                        supportAllValues: true
                    },
                    fontSize: {
                        options: [12, 'default', 16, 18, 20, 22, 24, 26, 28, 30],
                        supportAllValues: true
                    },
                    image: {
                        styles: [
                            'alignCenter',
                            'alignLeft',
                            'alignRight'
                        ],
                        toolbar: [
                            'imageTextAlternative', '|',
                            'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', 'imageStyle:side', '|',
                            'resizeImage'
                        ],
                        insert: {
                            integrations: [
                                'insertImageViaUrl'
                            ]
                        }
                    },
                    simpleUpload: {
                        // The URL that the images are uploaded to.
                        //uploadUrl: URLS_COM.d_editor_upload,
                        uploadUrl: URLS_COM.d_upload,

                        // Enable the XMLHttpRequest.withCredentials property.
                        withCredentials: true,

                        // Headers sent along with the XMLHttpRequest to the upload server.
                        headers: {
                            'X-CSRF-TOKEN': 'CSRF-Token',
                            [this.G_API.sTokenField]: this.G_API.fGetToken()
                        },

                        // 处理接口返回数据，方法需要返回{ url: '' }
                        fHandleResult: function (oData) {
                            //console.log(oData);
                            return {
                                //url: 'https://es6.ruanyifeng.com/images/cover_thumbnail_3rd.jpg'
                                url: URLS_COM.i_pre + oData.id
                            }
                        }
                    },
                    ...this.config
                }
            }
        },
        //**** watch
        //**** 生命周期钩子：mounted, updated, beforeDestroy 等
        mounted() {
            //console.log(Array.from(ClassicEditor.ui.componentFactory.names()));
        },
        beforeDestroy() {
        },
        //**** methods
        methods: {
            //*** 开放给父子组件的接口方法
            //*** 事件响应函数
            fEditorInput(sEditorData) {
                this.$emit('input', sEditorData)
            },
            fEditorEvent(sEventType) {
                this.$emit(sEventType);
            }
            //*** 其他
        }
        //**** template, render
    }
</script>

<style lang="less" rel="stylesheet">
</style>
